<template>
	<view class="gmbg">
		<headertop title="过敏报告" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="gmbgback">

		</view>
		<view :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="fenleibox">
			<view class="headerboxf">
				<view :style="{'z-index':mode=='week'?'999':'0'}" :class="mode=='week'?'fenlei bscolor':'fenlei'"
					style="" @click="switchMode('week')">
					<image :src="_static('/images/微信图片_20250711161321.png')" mode="" class="bj" v-if="mode!='week'">
					</image>
					<image :src="_static('/images/Rectangle 24664@2x.png')" class="bj" v-if="mode=='week'">
					</image>
					<span>周报</span>
				</view>
				<view :style="{'z-index':mode!='week'?'999':'0'}" :class="mode=='month'?'fenlei bscolor':'fenlei'"
					style="right: 0%;" @click="switchMode('month')">
					<image :src="_static('/images/微信图片_20250711162222.png')" class="bj" v-if="mode!='week'" />
					<image :src="_static('/images/Rectangle 24665@2x.png')" class="bj" v-if="mode=='week'"></image>
					<span>月报</span>
				</view>
			</view>
			<view class="riqidate">
				<image @click="navigate(-1)" :src="_static('/images/you.png')" mode="" style="margin-left: 28rpx;">
				</image>
				<span>{{currentRange['start']}}至{{currentRange['end']}}</span>
				<image @click="navigate(1)" :src="_static('/images/zuo.png')" mode="" style="margin-right: 28rpx;">
				</image>
			</view>
			<view class="shenfencard" v-if="pagetype==0">
				<image :src="_static('/images/userback.png')" class="shenfencardback" mode=""></image>

				<view class="userline">
					<view style="display: flex;align-items: center;" v-if="userobj['userinfo']">
						<image :src="userobj['userinfo']['avatar']" class="avtaru" mode=""></image>
						<view class="texts">
							<view class="t1">
								{{userobj['userinfo']['user_name']}}
							</view>
							<view class="t2">
								{{userobj['userinfo']['age']}}岁
							</view>
						</view>
					</view>

					<view class="rightbox">
						<view class="tt">
							<span style="line-height: 26rpx;">初次就诊时间</span>
							<span style="line-height: 26rpx;"
								v-if="userobj['userinfo'].first_illness_date">{{userobj['userinfo'].first_illness_date}}</span>
						</view>
					</view>
				</view>
				<view class="shuzhibox">
					<view class="itemshuzhi">
						<view class="num">
							{{userobj['userinfo']['height']}}
						</view>
						<span>身高cm</span>
					</view>
					<view class="itemshuzhi">
						<view class="num">
							{{userobj['userinfo']['weight']}}
						</view>
						<span>体重kg</span>
					</view>
					<view class="itemshuzhi">
						<view class="num">
							{{userobj['userinfo']['bmi']}}
						</view>
						<span>体质指数BMI</span>
					</view>
				</view>
			</view>
			<view class="benzhougaishu" v-if="pagetype==0">
				<view class="center">
					<view class="htop">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
						</image>
						<span>本{{mode=='week'?'周':'月'}}概览</span>
					</view>
					<view class="cishuboxs">
						<view class="line">
							<span>手动记录PEF次数</span>
							<span>{{userobj['pef_num']}}次</span>
						</view>
						<view class="line">
							<span>用药天数</span>
							<span>{{userobj['use_medicine_days']}}天</span>
						</view>
						<view class="line">
							<span>过敏天数</span>
							<span>{{userobj['allergy_days']}}天</span>
						</view>
						<view class="line">
							<span>未过敏天数</span>
							<span>{{userobj['un_allergy_days']}}天</span>
						</view>
					</view>
				</view>
			</view>
			<view class="gmqktj" v-if="pagetype==1">
				<view class="center" style="margin-top: 0;">
					<view class="titleline"
						style="height: 90rpx;border-bottom: 2rpx solid #F2F3F5;display: flex;align-items: center;">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
						</image>
						<span>肺功能数据分析</span>
					</view>
					<view class="echarts">
						<view class="" style="width: 252rpx; height:252rpx;">
							<l-echart ref="chartRef"></l-echart>
						</view>
						<view class="shili">
							<view class="shiliitem">
								<view class="sekuai" style="background:#46C3B1 ;">

								</view>
								<span>控制良好：{{contentobj['lh']}}次</span>
							</view>
							<view class="shiliitem">
								<view class="sekuai" style="background:#FFA537 ;">

								</view>
								<span>加重先兆：{{contentobj['jz']}}次</span>
							</view>
							<view class="shiliitem">
								<view class="sekuai" style="background:#FF6B68 ;">

								</view>
								<span>急性发作：{{contentobj['fz']}}次</span>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 2rpx;background: #F2F3F5;margin-top: 32rpx;">

					</view>
					<view class="echarts1" style="margin-top: 0rpx;">
						<view class="titleline"
							style="height: 90rpx;border-bottom: 2rpx solid #F2F3F5;display: flex;align-items: center;">
							<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
							</image>
							<span>PEF日间变异率趋势图</span>
						</view>
						<view style="width:630rpx; height:448rpx;">
							<l-echart ref="chartRef2"></l-echart>
						</view>
						<view class="shilibox">
							<view class="itemnd">
								<view class="fk" style="background: #46C3B1;">

								</view>
								<span>控制良好</span>
							</view>
							<view class="itemnd">
								<view class="fk" style="background:#7FD2F9">

								</view>
								<span>先兆加重</span>
							</view>
							<view class="itemnd">
								<view class="fk" style="background:#FF6B68">

								</view>
								<span>急性发作</span>
							</view>
							<view class="itemnd">
								<image src="/static/images/微信图片_20250730095821.png"
									style="width: 28rpx;height: 5rpx;margin-right: 12rpx;" mode="widthFix"></image>
								<span>日间变异率</span>
							</view>
						</view>
						<view class="numtextbox">
							<view class="itembb">
								<view class="numtt">
									{{contentobj['pef_best']?.pef_best||'--'}}
								</view>
								<view class="tt1">
									PEF最佳值
								</view>
								<view class="riqt">
									{{contentobj['pef_best']?.date||'--'}}
								</view>
							</view>
							<view class="itembb">
								<view class="numtt">
									{{contentobj['pef_min']?.pef_min||'--'}}
								</view>
								<view class="tt1">
									PEF最低值
								</view>
								<view class="riqt">
									{{contentobj['pef_min']?.date||'--'}}
								</view>
							</view>
							<view class="itembb">
								<view class="numtt">
									{{contentobj['dvr_max']?.dvr||'--'}}
								</view>
								<view class="tt1">
									变异率最高
								</view>
								<view class="riqt">
									{{contentobj['dvr_max']?.date||'--'}}
								</view>
							</view>
							<view class="itembb">
								<view class="numtt">
									{{contentobj['dvr_min']?.dvr||'--'}}
								</view>
								<view class="tt1">
									变异率最低
								</view>
								<view class="riqt">
									{{contentobj['dvr_min']?.date||'--'}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>





			<view class="gmqktj" v-if="pagetype==3">
				<view class="center">
					<view class="titleline">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
						</image>
						<span>过敏情况统计图</span>
					</view>
					<view class="echarts">
						<view class="" style="width: 252rpx;height: 252rpx;">
							<l-echart ref="chartRef4"></l-echart>
						</view>
						<view class="shili">
							<view class="shiliitem">
								<view class="sekuai">

								</view>
								<span>未过敏：{{contentobj['un_allergy_days']}}天</span>
							</view>

							<view class="shiliitem">
								<view class="sekuai" style="background:#FF6B68">

								</view>
								<span>过敏：{{contentobj['allergy_days']}}天</span>
							</view>
							<view class="shiliitem">
								<view class="sekuai" style="background: #FFA537;">

								</view>
								<span>未记录：{{contentobj['un_record']}}天</span>
							</view>
						</view>
					</view>
					<view style="width: 100%;height: 2rpx;background: #F2F3F5;margin-top: 32rpx;">

					</view>
					<view class="echarts1">
						<view style="width:678rpx;height:250rpx">
							<l-echart ref="chartRef5"></l-echart>
						</view>
						<view class="shilibox" style="justify-content: flex-start;">
							<view class="itemnd">
								<view class="fk" style="background: #46C3B1;">

								</view>
								<span>未过敏</span>
							</view>
							<view class="itemnd" style="margin-left: 54rpx;">
								<view class="fk" style="background:#FF6B68">

								</view>
								<span>过敏</span>
							</view>
							<view class="itemnd" style="margin-left: 54rpx;">
								<view class="fk" style="background:#FFA537">

								</view>
								<span>未记录</span>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="gmqktj" v-if="pagetype==2">
				<view class="center">
					<view class="titleline">
						<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
						</image>
						<span>其他用药统计图</span>
					</view>
					<view class="classifybox">
						<view class="itembox" style="margin-left: 48rpx;">
							<view class="sz">
								{{contentobj['medicine_types']}}
							</view>
							<span>药品种类</span>
						</view>
						<view class="itembox">
							<view class="sz">
								{{contentobj['medicine_days']}}
							</view>
							<span>服药天数</span>
						</view>
						<view class="itembox" style="margin-right: 48rpx;">
							<view class="sz">
								{{contentobj['un_medicine_days']}}
							</view>
							<span>未服药天数</span>
						</view>
					</view>

					<view class="echarts1">
						<l-echart ref="chartRef3"></l-echart>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="height: 194rpx;">

		</view>
		<view class="fixedbox">
			<view class="btn" v-if="pagetype==0" @click="pagetype++">
				下一页
			</view>
			<view class="btn" v-if="pagetype==3" @click="pagetype--">
				上一页
			</view>
			<view class="btnss" v-if="pagetype!=0&&pagetype!=3">
				<view class="bn" @click="pagetype--">
					上一页
				</view>
				<view class="bn1" @click="pagetype++">
					下一页
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min')
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const statusBarHeight = ref('')
	const chartRef = ref(null)
	const chartRef1 = ref(null)
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	const mode = ref('week')
	// 当前基准日期
	const baseDate = ref(new Date())
	const contentobj = ref({})
	const chartRef3 = ref(null)
	const last_date = ref('')
	const chartRef2 = ref(null)
	const pagetype = ref(0)
	const chartRef4 = ref(null)
	const chartRef5 = ref(null)
	const userobj = ref({})
	const formData = reactive({
		page_type: 'overview',
		start_time: '',
		end_time: ''
	})

	const optiondate = {
		tooltip: {
			show: false,
			trigger: 'item'
		},
		legend: {
			top: '5%',
			left: 'center',
			show: false
		},
		series: [{
			type: 'pie',
			radius: ['40%', '70%'],
			avoidLabelOverlap: false,
			label: {
				show: false,
				position: 'center'
			},
			emphasis: {
				label: {
					show: false,
					fontSize: 40,
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: true
			},
			data: [],
			itemStyle: {
				normal: {
					color: function(params) { // 设置单个颜色，例如第一个扇区为红色，第二个为蓝色，第三个为绿色
						var colorList = ['#46C3B1', '#FFA537', '#FF6B68']; // 可以根据需要自定义颜色列表
						return colorList[params.dataIndex]; // 使用数据索引来选择颜色
					}
				},
			}
		}]
	}
	const data2 = {
		controlGood: [{
			value: 20,
			itemStyle: {
				color: '#FF6B68'
			}
		}, {
			value: 30,
			itemStyle: {
				color: '#fda536'
			}
		}, {
			value: 60,
			itemStyle: {
				color: '#fda536'
			}
		}, {
			value: 70,
			itemStyle: {
				color: '#fda536'
			}
		}, 80, 90, 100], // 控制良好值 
		warning: [0, 32, 25, 30, 0, 87, 0], // 先兆加重值
		acute: [55, 6, 0, 66, 0, 100, 0], // 急性发作值
		variability: [17, 52, 10, 60, 55, 48, 80] // 日间变异率 
	}
	// 生成最近7天日期（基于2025-06-20）
	const dates = [];
	for (let i = 6; i >= 0; i--) {
		const date = new Date(2025, 5, 20 - i); // 月份0-11（5代表6月）
		dates.push(`${date.getMonth()  + 1}/${date.getDate()}`);
	}

	const optiondate2 = {
		tooltip: {
			position: ['50%', '50%'], // 正中间
			trigger: 'item'
		},
		grid: {
			top: 10,
			bottom: 30,
			left: 50, // 为y轴留出足够空间
		},
		xAxis: {
			type: 'category',
			data: dates,
			axisTick: {},
			axisLabel: {
				interval: 0,
				fontSize: 10, // 调整字体大小
				interval: 0, // 强制显示所有标签
			}
		},
		yAxis: {
			type: 'value',
			min: 0,
			max: 100,
			axisLabel: {
				formatter: '{value}%'
			}
		},
		series: [{ // 控制良好值（柱状）
				// name: '控制良好',
				type: 'bar',
				data: data2.controlGood,
				itemStyle: {
					color: '#46c4b2',
					borderRadius: [5, 5, 0, 0],
				},
				barWidth: 17,
				label: {
					show: false,
					position: 'top',
					formatter: '{c}%'
				},
				barGap: 0
			},
			{ // 日间变异率（折线）
				name: '日间变异率',
				type: 'line',
				data: data2.variability,
				symbol: 'circle',
				symbolSize: 8,
				showSymbol: false,
				smooth: true,
				lineStyle: {
					width: 2,
					type: 'solid'
				},
				itemStyle: {
					color: '#3fb0e5'
				},
				label: {
					show: false,
					position: 'top',
					formatter: '{c}%'
				},
				z: 10 // 确保折线显示在最上层 
			}
		],
		dataZoom: [ // 数据区域缩放
			{
				type: 'inside',
				start: 0,
				end: 100,
				zoomLock: true
			},
		]
	}


	const optiondate1 = {
		tooltip: {
			position: ['50%', '50%'], // 正中间
			trigger: 'item',
			formatter: '{b}: {c} 次'
		},
		grid: {
			top: 10,
			bottom: 30,
			left: 50
		},
		dataZoom: [ // 数据区域缩放
			{
				type: 'inside',
				start: 0,
				end: 100,
				zoomLock: true
			},
		],
		xAxis: {
			type: 'category',
			data: dates,
			axisLabel: {
				show: true, // 确保显示标签
				interval: 0, // 强制显示所有标签
				fontSize: 10, // 调整字体大小
			},
			axisTick: {},
		},
		yAxis: {
			minInterval: 1,
			type: 'value',
			axisLabel: {
				formatter: '{value}次'
			}
		},
		series: {
			type: 'bar',
			data: [3, 6, 9, 12, 15, 20, 25],
			itemStyle: {
				color: '#46c4b2',
				borderRadius: [5, 5, 0, 0],
			},
			barWidth: 17,
			label: {
				show: false,
				position: 'top',
				formatter: '{c}%'
			},
			barGap: 0
		}
	}
	const option5 = {
		tooltip: {
			position: ['50%', '50%'], // 正中间
			trigger: 'item'
		},
		grid: {
			top: 10,
			bottom: 30,
			left: 50
		},
		dataZoom: [ // 数据区域缩放
			{
				type: 'inside',
				start: 0,
				end: 100,
				zoomLock: true
			},
		],
		xAxis: {
			type: 'category',
			data: dates,
			axisTick: {},
			axisLabel: {
				show: true, // 确保显示标签
				interval: 0, // 强制显示所有标签
				fontSize: 10, // 调整字体大小
			}
		},
		yAxis: {
			type: 'category',
			data: ['', '未记录', '未过敏', '过敏'],
			boundaryGap: false,
			axisLine: {
				onZero: true
			},
			axisTick: {
				show: false, // 隐藏刻度线
			}
		},
		series: {
			type: 'bar',
			data: [],
			itemStyle: {
				color: '#46c4b2',
				borderRadius: [5, 5, 0, 0],
			},
			barWidth: 17,
			label: {
				show: false,
				position: 'top',
				formatter: '{c}%'
			},
			barGap: 0
		},
	}

	const barHeight = ref('')
	const back1 = ref('')
	watch(() => pagetype.value, (newval, oldval) => {
		init()
	})

	onLoad(() => {
		init()
	})
	async function init() {
		const {
			start,
			end
		} = currentRange.value
		formData['start_time'] = start
		formData['end_time'] = end
		if (pagetype.value == 0) {
			formData['page_type'] = 'overview'
		} else if (pagetype.value == 1) {
			formData['page_type'] = 'fgn'
		} else if (pagetype.value == 2) {
			formData['page_type'] = 'medicine'
		} else if (pagetype.value == 3) {
			formData['page_type'] = 'allergy'
		}
		const res = await $api.allergy_report(formData)
		if (res.code == 1) {
			if (pagetype.value == 0) {
				userobj.value = res.data
			} else if (pagetype.value == 1) {
				contentobj.value = res.data
				var arr = [{
					value: res.data.lh,
					name: '良好'
				}, {
					value: res.data.jz,
					name: '加重先兆'
				}, {
					value: res.data.fz,
					name: '急性发作'
				}, ]


				optiondate2.xAxis.data = res.data.date_list
				optiondate2.series[0].data = res.data.result_list.map(v => {
					return {
						value: v == 0 ? 0 : 100,
						itemStyle: {
							color: v == 1 ? '#46c4b2' : v == 2 ? '#fda536' : '#FF6B68'
						}
					}
				})
				if (mode.value == 'week') {
					optiondate2.dataZoom[0].end = 100
				} else {
					uni.showToast({
						title: '左右滑动查看更多',
						icon: 'none'
					})
					optiondate2.dataZoom[0].end = 20
				}
				optiondate2.series[1].data = res.data.dvr_list
				optiondate.series[0]['data'] = arr
				setTimeout(async () => {
					const myChart = await chartRef.value.init(echarts)
					const myChart2 = await chartRef2.value.init(echarts)
					myChart.setOption(optiondate)
					myChart2.setOption(optiondate2)
				}, 300)
			} else if (pagetype.value == 2) {
				contentobj.value = res.data
				if (mode.value == 'week') {
					optiondate1.dataZoom[0].end = 100
				} else {
					uni.showToast({
						title: '左右滑动查看更多',
						icon: 'none'
					})
					optiondate1.dataZoom[0].end = 20
				}
				optiondate1.xAxis.data = res.data.date_list
				optiondate1.series.data = res.data.num_list
				setTimeout(async () => {
					const myChart3 = await chartRef3.value.init(echarts)
					myChart3.setOption(optiondate1)
				}, 300)
			} else if (pagetype.value == 3) {
				contentobj.value = res.data
				if (mode.value == 'week') {
					option5.dataZoom[0].end = 100
				} else {
					uni.showToast({
						title: '左右滑动查看更多',
						icon: 'none'
					})
					option5.dataZoom[0].end = 20
				}
				var arr = [{
					value: res.data.un_allergy_days,
					name: '未过敏'
				}, {
					value: res.data.un_record,
					name: '未记录'
				}, {
					value: res.data.allergy_days,
					name: '过敏'
				}]
				option5.xAxis.data = res.data.date_list
				option5.series.data = res.data.allergy_list.map(v => {
					var val = ''
					var color = ''
					if (v == 1) {
						val = '未记录'
						color = '#FFA537'
					} else if (v == 2) {
						val = '未过敏'
						color = '#46c3b1'
					} else if (v == 3) {
						val = '过敏'
						color = '#FF6B68'
					}
					return {
						// 1 未记录 2：未过敏 3：过敏
						value: val,
						itemStyle: {
							'color': color
						}
					}
				})
				optiondate.series[0]['data'] = arr
				setTimeout(async () => {
					const myChart = await chartRef4.value.init(echarts)
					const myChartt = await chartRef5.value.init(echarts)
					myChart.setOption(optiondate)
					myChartt.setOption(option5)
				}, 300)
			}
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;

	})

	// 当前日期范围
	const currentRange = computed(() => {
		return mode.value === 'week' ?
			getWeekRange(baseDate.value) :
			getMonthRange(baseDate.value)
	})
	// 显示的日期范围文本
	const displayRange = computed(() => {
		const {
			start,
			end
		} = currentRange.value
		const startStr = formatDate(start)
		const endStr = formatDate(end)

		if (mode.value === 'week') {
			// 如果是同一月，只显示月份一次
			if (start.getMonth() === end.getMonth()) {
				return `${start.getMonth() + 1}月${start.getDate()}日-${end.getDate()}日`
			}
			return `${start.getMonth() + 1}月${start.getDate()}日-${end.getMonth() + 1}月${end.getDate()}日`
		} else {
			return `${start.getFullYear()}年${start.getMonth() + 1}月`
		}
	})
	// 格式化日期
	const formatDate = (date, format = 'YYYY-MM-DD') => {
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')

		return format
			.replace('YYYY', year)
			.replace('MM', month)
			.replace('DD', day)
	}

	function padStart(n) {
		return n.toString().padStart(2, 0)
	}
	// 切换模式
	const switchMode = (newMode) => {
		mode.value = newMode
		baseDate.value = new Date() // 重置为当前日期
		init()
	}
	// 导航到上一周期或下一周期
	const navigate = (direction) => {
		const newDate = new Date(baseDate.value)

		if (mode.value === 'week') {
			newDate.setDate(newDate.getDate() + direction * 7)
		} else {
			newDate.setMonth(newDate.getMonth() + direction)
		}
		if (mode.value === 'week') {
			if (convertToTimestamp(getWeekRange(newDate)['start']) > Date.now()) {
				return
			}
		} else {
			if (convertToTimestamp(getWeekRange(newDate)['start']) > Date.now()) {
				return
			}
		}
		baseDate.value = newDate
		init()
	}

	function convertToTimestamp(dateStr) {
		return new Date(dateStr).getTime();
	}

	// 获取周的日期范围
	const getWeekRange = (date) => {
		const d = new Date(date)
		const day = d.getDay() // 0-6 (0是周日)

		// 计算周一
		const monday = new Date(d)
		monday.setDate(d.getDate() - (day === 0 ? 6 : day - 1))
		const year = monday.getFullYear()
		const month = padStart(monday.getMonth() + 1)
		const dayy = padStart(monday.getDate())
		var monday1 = `${year}-${month}-${dayy}`
		// 计算周日
		const sunday = new Date(monday)
		sunday.setDate(monday.getDate() + 6)

		const year1 = sunday.getFullYear()
		const month1 = padStart(sunday.getMonth() + 1)
		const day1 = padStart(sunday.getDate())
		var sunday1 = `${year1}-${month1}-${day1}`
		return {
			start: monday1,
			end: sunday1
		}
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})
	// 获取月的日期范围
	const getMonthRange = (date) => {
		const d = new Date(date)

		// 当月第一天
		const firstDay = new Date(d.getFullYear(), d.getMonth(), 1)
		const year = firstDay.getFullYear()
		const month = padStart(firstDay.getMonth() + 1)
		const dayy = padStart(firstDay.getDate())
		var firstDay1 = `${year}-${month}-${dayy}`
		// 当月最后一天
		const lastDay = new Date(d.getFullYear(), d.getMonth() + 1, 0)
		const year1 = lastDay.getFullYear()
		const month1 = padStart(lastDay.getMonth() + 1)
		const day1 = padStart(lastDay.getDate())
		var lastDay1 = `${year1}-${month1}-${day1}`
		return {
			start: firstDay1,
			end: lastDay1
		}
	}
</script>

<style lang="scss">
	canvas {
		z-index: 100 !important;
	}

	page {
		background: #F7F8FA;
		height: auto !important;
	}

	.fixedbox {
		width: 100%;
		height: 194rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		overflow: hidden;
		position: fixed;
		bottom: 0%;
		z-index: 999;

		.btnss {
			width: 686rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: auto;
			margin-top: 32rpx;

			.bn1 {
				width: 324rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 82rpx;
			}

			.bn {
				width: 328rpx;
				height: 82rpx;
				background: #F2F3F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #4E5969;
				text-align: center;
				line-height: 82rpx;
			}
		}

		.btn {
			width: 686rpx;
			height: 82rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 82rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 82rpx;
			margin: auto;
			margin-top: 32rpx;
		}
	}

	.gmbg {
		width: 100%;
		overflow: hidden;
		position: relative;

		.gmbgback {
			width: 100%;
			height: 312rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.fenleibox {
			width: 100%;
			overflow: hidden;
			margin-top: 38rpx;

			.riqidate {
				width: 686rpx;
				height: 82rpx;
				background: rgba(203, 238, 255, 0.6);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1D2129;
				margin: auto;
				margin-top: 24rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}

			}

			.shenfencard {
				width: 686rpx;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 32rpx;
				position: relative;

				.shenfencardback {
					width: 100%;
					position: absolute;
					height: 286rpx;
				}

				.shuzhibox {
					width: 576rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: auto;
					margin-top: 40rpx;
					margin-bottom: 34rpx;

					.itemshuzhi {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						z-index: 99;

						.num {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #1D2129;
						}
					}
				}

				.userline {
					display: flex;
					align-items: center;
					margin-top: 34rpx;
					width: 100%;
					overflow: hidden;
					justify-content: space-between;
					z-index: 999;

					.rightbox {
						width: 236rpx;
						height: 68rpx;
						background: #2AB4F5;
						border-radius: 34rpx 0rpx 0rpx 34rpx;
						z-index: 999;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.tt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							margin-left: 34rpx;
							display: flex;
							flex-direction: column;
							justify-content: center;
						}
					}

					.avtaru {
						width: 88rpx;
						height: 88rpx;
						border-radius: 50%;
						margin-left: 28rpx;
						z-index: 999;
					}

					.texts {
						margin-left: 24rpx;
						overflow: hidden;
						z-index: 999;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #000000;
							z-index: 999;
						}

						.t2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							margin-top: 14rpx;
							z-index: 999;
						}
					}
				}
			}

			.benzhougaishu {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 32rpx;

				.center {
					width: 630rpx;
					margin: auto;
					overflow: hidden;

					.htop {
						width: 100%;
						height: 90rpx;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
						border-bottom: 2rpx solid #F2F3F5;

						.xbq {
							width: 34rpx;
							height: 20rpx;
							margin-right: 14rpx;
						}
					}

					.cishuboxs {
						width: 100%;
						overflow: hidden;
						margin-top: 28rpx;

						.line {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 32rpx;
						}
					}
				}
			}

			.gmqktj {
				width: 686rpx;
				margin: auto;
				margin-top: 32rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;

				.center {
					width: 630rpx;
					margin: auto;
					margin-top: 30rpx;
					// overflow: hidden;

					.classifybox {
						width: 630rpx;
						height: 146rpx;
						background: #F7F8FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 32rpx;

						.itembox {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #4E5969;

							.sz {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 28rpx;
								color: #1D2129;
							}
						}
					}

					.titleline {
						width: 100%;
						overflow: hidden;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;

						.xbq {
							width: 34rpx;
							height: 20rpx;
							margin-right: 14rpx;
						}
					}

					.echarts1 {
						width: 100%;
						margin-top: 44rpx;
						// overflow: hidden;


						.numtextbox {
							width: 630rpx;
							height: 170rpx;
							background: #F7F8FA;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 28rpx;
							align-items: center;
							margin-bottom: 28rpx;

							.numtextbox .itembb:first-child {
								margin-left: 16rpx;
							}

							.numtextbox .itembb:last-child {
								margin-right: 18rpx;
							}

							.itembb {
								display: flex;
								flex-direction: column;
								align-items: center;

								.numtt {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 28rpx;
									color: #1D2129;
									margin-bottom: 24rpx;
								}

								.tt1 {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 26rpx;
									color: #4E5969;
									margin-bottom: 28rpx;
								}

								.riqt {
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 22rpx;
									color: #86909C;
								}
							}
						}

						.shilibox {
							width: 100%;
							overflow: hidden;
							display: flex;
							margin-top: 34rpx;
							align-items: center;
							margin-bottom: 52rpx;
							justify-content: space-between;
							align-items: center;

							.itemnd {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #4E5969;

								.fk {
									width: 28rpx;
									height: 28rpx;
									background: #CAEEFF;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									margin-right: 12rpx;
								}
							}
						}
					}

					.echarts {
						width: 100%;
						margin: auto;
						margin-top: 36rpx;
						display: flex;
						align-items: center;
						box-sizing: border-box;

						.shili {
							width: 252rpx;
							overflow: hidden;

							.shiliitem {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #4E5969;
								margin-bottom: 40rpx;

								.sekuai {
									width: 28rpx;
									height: 28rpx;
									background: #46C3B1;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									margin-right: 12rpx;
								}

							}
						}
					}
				}
			}

			.headerboxf {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;

				.bscolor {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500 !important;
					font-size: 32rpx !important;
					color: #1D2129 !important;
				}

				.fenlei {
					width: 433rpx;
					height: 90rpx;
					position: absolute;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #4E5969;
					text-align: center;
					line-height: 90rpx;

					.bj {
						width: 433rpx;
						height: 90rpx;
						position: absolute;
						top: 0;
						right: 0;
						left: 0;
						bottom: 0;
						margin: auto;
						z-index: -1;
					}
				}
			}
		}
	}
</style>